<template>
  <el-container class="wrapper">
    <el-aside class="navbar">
      <el-container>
        <el-header style="text-align: center; padding-top: 20px; font-weight: bold; font-size: 20px">
          管理员后台
        </el-header>
        <el-main class="nav-list">
          <el-menu :default-active="activeIndex">
            <el-menu-item
              v-for="(item, index) in navs"
              :key="index"
              :index="index.toString()"
              @click="addTab(item.name, item.title)"
            >
              {{ item.title }}
            </el-menu-item>
          </el-menu>
        </el-main>
      </el-container>
    </el-aside>
    <el-main style="padding: 0">
      <el-container>
        <el-header class="toolbar">
          <toolbar></toolbar>
        </el-header>
        <el-main style="padding-top: 15px">
          <el-tabs v-model="currentTabName" closable type="card" @tab-remove="removeTab">
            <el-tab-pane
              v-for="(item, index) in tabs"
              :key="index"
              :label="item.title"
              :name="item.name"
            >
              <div :is="item.component"></div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import UserList from "@/views/home/children/user-list";
import Toolbar from "@/views/home/children/toolbar"

export default {
  name: "Home",
  components: {
    UserList,
    Toolbar
  },
  data() {
    return {
      activeIndex: "",
      currentTabName: "",
      navs: [
        {
          title: "用户列表",
          name: "UserList",
        },
      ],
      tabs: [],
    }
  },
  methods: {
    addTab: function (name, title, component) {
      for (const tab of this.tabs) {
        if (tab.name === name) {
          this.currentTabName = name;
          return;
        }
      }
      this.tabs.push({
        name: name,
        title: title || name,
        component: component || name,
      });
      if (this.tabs.length === 1)
        this.currentTabName = name;
    },
    removeTab: function (targetName) {
      let tabs = this.tabs;
      if (this.currentTabName === targetName) {
        for (let i = 0; i < tabs.length; i++) {
          const tab = tabs[i];
          if (tab.name === targetName) {
            const nextTab = tabs[i + 1] || tabs[i - 1];
            if (nextTab)
              this.currentTabName = nextTab.name;
            break;
          }
        }
      }
      this.tabs = tabs.filter(tab => tab.name !== targetName);
    },
  },
  mounted() {
    this.$store.dispatch("selfInfo");
  }
}
</script>

<style lang="scss" scoped>

.navbar {
  height: 100vh;
  background-color: #2F4056;

  & .el-header {
    background-color: inherit;
    color: white;
  }
}

.toolbar {
  background-color: #393D49;
}

.nav-list {
  padding: 0;
  background-color: #2F4056;

  & * {
    border: none;
  }

  & * {
    background-color: #2F4056;
    color: #eee;

    &:hover, &:focus, &.is-active {
      background-color: #2F5D62;
      color: white;
    }
  }
}

</style>